// tree tabs
import { Col, Descriptions, Row, Tree } from 'antd';
import React, { useState } from 'react';

// 示例数据
const treeData = [
  {
    stationId: 0,
    areaId: 1,
    deviceId: 0,
    deviceCode: '',
    deviceName: '',
    deviceType: '',
    subDevices: [
      {
        stationId: 0,
        areaId: 1,
        deviceId: 0,
        deviceCode: '',
        deviceName: '',
        deviceType: '',
        subDevices: [{}],
      },
    ],
  },
];

const DeviceInfo: React.FC<{ type: string; path: string }> = ({ type, path }) => {
  // 根据设备类型显示不同的内容
  if (type === 'type1') {
    return (
      <Descriptions title="设备类型1 信息">
        <Descriptions.Item label="路径">{path}</Descriptions.Item>
        <Descriptions.Item label="属性1">值1</Descriptions.Item>
        <Descriptions.Item label="属性2">值2</Descriptions.Item>
        {/* 添加更多属性 */}
      </Descriptions>
    );
  } else if (type === 'type2') {
    return (
      <Descriptions title="设备类型2 信息">
        <Descriptions.Item label="路径">{path}</Descriptions.Item>
        <Descriptions.Item label="属性A">值A</Descriptions.Item>
        <Descriptions.Item label="属性B">值B</Descriptions.Item>
        {/* 添加更多属性 */}
      </Descriptions>
    );
  }
  return null;
};

const findNodePath = (key: string, data: any, path: string[] = []): string[] => {
  for (const node of data) {
    if (node.key === key) {
      return [...path, node.title];
    }
    if (node.children) {
      const childPath = findNodePath(key, node.children, [...path, node.title]);
      if (childPath.length) {
        return childPath;
      }
    }
  }
  return [];
};

const StationRealtimeMonitor: React.FC = () => {
  const [selectedDevice, setSelectedDevice] = useState<{
    key: string;
    type: string;
    path: string[];
  } | null>(null);

  const onSelect = (selectedKeys: React.Key[], info: any) => {
    if (info.node) {
      const path = findNodePath(info.node.key, treeData);
      setSelectedDevice({ key: info.node.key, type: info.node.type, path });
    }
  };

  return (
    <Row gutter={16} style={{ height: '100%', backgroundColor: '#fff' }}>
      <Col span={8} style={{ padding: 20, borderRight: '1px solid #D1D5E0' }}>
        <Tree
          treeData={treeData}
          fieldNames={{
            title: 'deviceName',
            key: 'deviceId',
            children: 'subDevices',
          }}
          onSelect={onSelect}
        />
      </Col>
      <Col span={16}>
        {selectedDevice ? (
          <DeviceInfo type={selectedDevice.type} path={selectedDevice.path.join(' / ')} />
        ) : (
          '请选择一个设备'
        )}
      </Col>
    </Row>
  );
};

export default StationRealtimeMonitor;
